<template>
  <div class="app-container">
    <el-form ref="form" :model="list" :rules="rules" label-width="120px">
      <el-form-item label="学号">
        <el-input v-model="list.studentId" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="list.sudentName" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="list.userName" placeholder="请输入内容，用于登录" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="list.passWord" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="list.majores" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="二级学院">
        <el-input v-model="list.college" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="list.studentClass" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="list.tel" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="list.email" placeholder="请输入内容" />
      </el-form-item>
      <el-upload
        action=""
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import qs from 'qs'

export default {
  data() {
    return {
      list: {
        studentId: '',
        sudentName: '',
        userName: '',
        passWord: '',
        majores: '',
        college: '',
        studentClass: '',
        tel: '',
        email: '',
        dialogImageUrl: '',
        dialogVisible: false
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    onSubmit() {
      this.$axios.post(`student/addStudent`, qs.stringify({
        'studentId': this.list.studentId,
        'studentName': this.list.sudentName,
        'username': this.list.userName,
        'password': this.list.passWord,
        'majores': this.list.majores,
        'college': this.list.college,
        'studentClass': this.list.studentClass,
        'tel': this.list.tel,
        'email': this.list.email
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
      })
        .then(res => {
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
          this.$router.push('/student/studentList')
        })
    },
    onCancel() {
      this.$message({
        message: '取消成功！',
        type: 'warning'
      })
      this.$router.push('/student/studentList')
    }

  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

